{% extends 'nav.html' %}

{% block content %}

<div class="container shadow p-4">
    <div class="row">
        <div class="col-12 text-center py-2">
            <h3>Shorten A Url</h3>
        </div>
        <div class="col-10 col-sm-10 col-md-6 mx-auto">

            {% if messages %}
            {% for msg in messages %}
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ msg }}

                <button type="button" class="close" data-dismiss="alert" area-label="Close">
                    <span area-hidden-true>&times;</span>
                </button>
            </div>
            {% endfor %}
            {% endif %}

            <form action="{% url 'generate' %}" method="POST">
                {% csrf_token %}
                <div class="form-group">
                    <input type="url" name="original" class="form-control" placeholder="Original Url">
                </div>
                <div class="form-group">
                    <div class="input-group-prepend">
                        <div class="input-group-text">http://localhost:8000/</div>
                        <input type="text" name="short" class="form-control" placeholder="Short Char (10 chars)"
                            maxlength="10" id="short">

                    </div>
                    <p id="shorthelp" class="form-text text-muted">Leave It Blank To generate randomly.</p>
                </div>
                <div class="form-group">
                    <input type="submit" class="btn btn-primary px-4" value="Generate">
                </div>
            </form>
        </div>
    </div>
</div>


<!-- ==== As In Youtube ===  -->
<!-- <div class="container my-4">
    <div class="row">
        <div class="col-12 text-center">
            <h4>Your Url's</h4>
        </div>
    </div>
    <div class="row justify-content-between">
       
        
        
            {% for u in urls %}

               <div class="col-6">
                Original : <a href="{{ u.original_url }}">{{ u.original_url }}</a> 
                <p>Short <a href="http://localhost:8000/{{ u.short_query }}">http://localhost:8000/{{ u.short_query }}</a></p>
                <p>Visits : {{ u.visits }}</p>
               </div>

                
            {% endfor %}
    
   
    </div>
</div> -->

<!-- == Little Better View With Delete  -->

<div class="container my-4">
    <div class="row">
        <div class="col-12 text-center">
            <h4>Your Url's</h4>
        </div>
    </div>
    <div class="row justify-content-between">

        {% for u in urls %}

        <div class="col-10 col-sm-10 col-md-6 mb-2 mx-auto">

            <div style="overflow: hidden;" class="customcontainer p-2">

                <p style="text-overflow: ellipsis;">Original : <a href="{{ u.original_url }}" target="_blank"
                        class="card-link">{{ u.original_url }}</a>
                </p>

                <p>Shorten : <a href="http://localhost:8000/{{ u.short_query }}" target="_blank"
                        class="card-link">http://localhost:8000/{{ u.short_query }}</a></p>
                <div class="row justify-content-between">
                    <div class="col-6 col-sm-6 ">
                        <h3>Visits : {{ u.visits }} </h3>
                    </div>
                    <div class="col-4">
                        <form action="{% url 'deleteurl' %}" method="post">
                            {% csrf_token %}
                            <input type="hidden" name="delete" value="{{ u.short_query }}">
                            <input type="submit" class="btn btn-danger" value="Delete">
                        </form>
                    </div>
                </div>

            </div>

        </div>
        {% endfor %}

    </div>
</div>



<style>
    .customcontainer {
        min-width: 100%;
        border: 2px solid #1d1d1d;
        border-radius: 5px;
        max-width: 100%;
        height: 100%;
    }
</style>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
    integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
    crossorigin="anonymous"></script>

</body>

</html>

{% endblock %}
